<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .box1,.box2{
            height: 150px;
            width: 150px;
            border: 1px solid red;
        }
        .move{
            position: relative;
            left: 151px;
            top:303px;
        }
    </style>
</head>
<body>
<!--相对定位,可以指定元素相对于自己的原始位置
开启之后可以使用left,top,right,bottom
如果有冲突 left/top 生效 right/bottom无效
left/top 意思是距离自己原始位置顶部/左边多远
相对定位 不脱标,老家留坑,别人不会把它原始的位置
占走,也就是说 ,标签真是的位置还在原来的地方,只不过
影子出去了,可以到处飘
-->

<div class="box1 move">
    十年之前
</div>
<div class="box2 ">
    我们是朋友
</div>
</body>
</html>






